<template>
  <div>
    <h1>vue3事件相关</h1>
    <pre @click="handler">
       大奖东去浪淘尽,千古风流人物
    </pre>
    <button @click="handler1(1, 2, 3, $event)">点击我传递多个参数</button>
    <div>我是一个div</div>
    <hr />
    <!-- vue2框架中：这种写法为自定义事件，可以通过.nvtive修饰符变为原生DOM事件
          vue3中下面写法其实即为原生DOM事件
    -->
    <!-- vue3：原生的DOM事件不管是放在标签身上、组件标签身上都是原生的dom事件 -->
    <Event1 @click="handler2">1111</Event1>
    <hr />
    <!--下面这种就是原生DOM事件--->
    <!--相当于给组件根节点绑定DOM事件+事件委派-->
    <Event2 @xxx="handler3"></Event2>
    <Event2 @zzz="handler4" @click="handler5"></Event2>
  </div>
</template>

<script setup lang="ts">
//事件:原生DOM事件、组件通信方式自定义事件
//事件回调
//引入子组件
import Event1 from "./Event1.vue";
import Event2 from "./Event2.vue";
const handler = (event: any) => {
  console.log(event);
};

const handler1 = (a: any, b: any, c: any, $event: any) => {
  console.log(a, b, c, $event);
};

const handler2 = () => {
  console.log(123);
};

const handler3 = (param1: any, param2: any) => {
  console.log(param1, param2);
};

const handler4 = (param1: any, param2: any) => {
  console.log(param1, param2);
};

const handler5 = (param1: any, param2: any) => {
  console.log(param1, param2);
};
</script>

<style scoped></style>
